<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>02</title>

</head>
<body onload="main(document.getElementById('graphContainer'))">
<div id="graphContainer"  style="position:relative;overflow:hidden;width:321px;height:241px;background:#eaedef;cursor:default;">

</div>
</body>
</html>
<script type="text/javascript">
    var mxBasePath = "./mx-graph/src/";

</script>
<script src="./mx-graph/src/js/mxClient.js"></script>

<script type="text/javascript">
    function main(container){
        // 先检查浏览器是否支持

        if(!mxClient.isBrowserSupported()){
            mxUtils.error("浏览器不支持",200,false)
        }
        const graph = new mxGraph(container)
        graph.setEnabled(false);
        //获取默认父节点
        const parent = graph.getDefaultParent();
        //禁用右键菜单
        mxEvent.disableContextMenu(container)
        // 设置默认节点样式
        const defaultVertexStyle= 'shape=cylinder;strokeWidth=2;fillColor=#ffffff;strokeColor=black;' +
            'gradientColor=#a0a0a0;fontColor=black;fontStyle=1;spacingTop=14;';


        graph.getModel().beginUpdate();
        try {
            // 创建两个顶点
            var v1 = graph.insertVertex(parent, null, 'Pump', 20, 20, 60, 60,defaultVertexStyle);
            var v2 = graph.insertVertex(parent, null, 'Tank', 200, 150, 60, 60,defaultVertexStyle);
            // 创建一个边
            var e1 = graph.insertEdge(parent, null, '', v1, v2,
                'strokeWidth=3;endArrow=block;endSize=2;endFill=1;strokeColor=#de0520;rounded=1;');
            // 设置边的形状
            e1.geometry.points = [new mxPoint(230, 50)];
            // 重新排列顶点
            graph.orderCells(true, [e1]);
        }
        finally {
            // 结束事务，刷新画布
            graph.getModel().endUpdate();
        }




    }
</script>
<style>




</style>
